import React from 'react'
import { ScaleS, ScaleT } from 'src/utils/ScreenUtil'
import { Text, View, StyleSheet } from 'react-native'
import PropTypes from 'prop-types'

export default class JobIntentionCardNew extends React.PureComponent {
  render () {
    const { dataSource: { workNature, jobPlace, workPlace, workCategory }, style } = this.props
    const workNatureValue = workNature && workNature[0]
    return (
      <View style={[styles.container, style]}>
        <Text style={styles.title}>{workNatureValue} | {`${jobPlace}·${workPlace.join(' ')}`}</Text>
        <View style={styles.jobTypeItemViews}>
          {workCategory && workCategory.map(e => {
            return e ? (
              <Text key={e} style={styles.jobTypeItemLabel}>#{e}</Text>
            ) : null
          })}
        </View>
      </View>
    )
  }
}
JobIntentionCardNew.propTypes = {
  dataSource: PropTypes.object
}
JobIntentionCardNew.defaultProps = {
  dataSource: {}
}
const styles = StyleSheet.create({
  container: {
    // flex: 1
    // padding: ScaleS(20)
  },
  title: {
    fontSize: ScaleT(15),
    color: '#000000',
    marginBottom: ScaleS(17)
  },
  jobTypeItemViews: {
    flexDirection: 'row',
    alignItems: 'center'
  },
  jobTypeItemLabel: {
    color: '#818181',
    fontSize: ScaleT(14),
    fontWeight: '300',
    marginRight: ScaleS(30)
  }
})
